<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>order detail</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/swiper.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>
    <style>
        .con-title{text-align: center;}
        .con-title span{display: inline-block;line-height: 40px;border-bottom: 1px solid #d7d7d7;font-weight: bold;font-size: 22px;
            margin: 40px 0;}

        .process-img{overflow: hidden;}
        .process-img .p1{}
        .process-img .p1 .l-icon{width: 58px;height: 10px;margin-top: 52px;margin-right: 12px;margin-left: 14px;;
            background-image: url("../img/vimostsports（gerenzhongxin-dzyf）-wlxq_14.png")}
        .process-img .p1 .c-icon{}
        .process-img .p1 .c-icon .icon{width: 115px;height: 115px;background-size: 100%;background-position-y: 115px;}
        .process-img .p1 .c-icon p{margin-top: 10px;color: #666;}
        .process-img .p1 .c-icon span{color: #666;}
        .process-img .p1 .r-icon{width: 58px;height: 10px;margin-top: 52px;margin-left: 12px;;
            background-image: url("../img/vimostsports（gerenzhongxin-dzyf）-wlxq_14.png")}
        .process-img .pro-active .l-icon{background-position-y: 10px !important;}
        .process-img .pro-active .r-icon{background-position-y: 10px !important;}
        .process-img .pro-active .c-icon .icon{background-position-y: 0 !important;}
        .process-img .pro-active .c-icon p{color: #c4261d;}
        .process-img .pro-active .c-icon span{color: #c4261d;}

        .process-list{background-color: #f8f8f8;margin-top: 25px;}
        .process-list .pro-title{line-height: 60px;border-bottom: 1px solid #d7d7d7;padding-left: 15px;}
        .process-list .pro-title span{display: inline-block;margin-right: 50px;}
        .process-list ul{padding:25px 15px;}
        .process-list ul li p{}
        .process-list ul li p b{display: inline-block;width: 11px;height: 11px;background-color: #c7c7c7;border-radius: 11px;margin-right: 10px;}
        .process-list ul li p span{display: inline-block;margin-right: 25px;font-size: 14px;}
        .process-list ul li p .r2{text-align: center;width: 80px;text-transform: capitalize;}
        .process-list ul li div{border-left: 1px solid #c7c7c7;height: 20px;margin-left: 5px;}
        .process-list ul .active div{border: none !important;height: 0;}
        .process-list ul .active b{background-color: #c4261d !important;}
        .process-list ul .active span{color: #c4261d;}
        .goods-list{overflow: hidden;font-size: 16px;margin-top: 30px;border-bottom: 1px solid #d7d7d7;padding-bottom: 20px;}
        .goods-list div{width: 200px;text-align: center;}
        .goods-list div p{height: 35px;background-color: #f8f8f8;line-height: 35px;font-weight: bold;}
        .goods-list table{width: 1000px;}
        .goods-list table th{height: 35px;background-color: #f8f8f8;font-size: 16px;}
        .goods-list table td{text-transform: capitalize;height: 30px;text-align: center;}
        .add-note{}
        .add-note p{line-height: 30px;font-weight: bold;text-align: center;font-size: 16px;margin-top: 10px;}
        .add-note textarea{border: 1px solid #d7d7d7;outline: none;display: block;width: 100%;resize: none;}
        .total-con{text-align: right;font-size: 16px;font-weight: bold;line-height: 30px;padding: 10px 0;border-bottom: 1px solid #d7d7d7;}
        .total-con .amount{font-size: 18px;}

        .swiper{position: relative;}
        .swiper .title{text-align: center;padding: 30px 0;}
        .swiper .title span{display: inline-block;font-weight: bold;font-size: 20px;line-height: 50px;border-bottom: 1px solid #d7d7d7;}
        .swiper-container{width: 1100px;margin: 0 auto;}
        .swiper-slide img{display: block;width: 100%;height: 250px;}
        .swiper-button-prev,.swiper-button-next{top:240px;}

        .bottom-list{margin-top: 30px;}
        .bottom-list div{background-color: #f8f8f8;font-size: 14px;line-height: 45px;margin-bottom: 10px;}
    </style>
</head>
<body ng-app="">
<!--公共头部-->
<div ng-include="'../html/header.html'"></div>
<div class="bread container-fluid">
    <div class="container clear">
        <div class="fl path">
            <p class="fs-18"><em>You are here:&nbsp;</em><span class="bold red text-capitalize">personal center</span></p>
        </div>
        <div class="fr">
            <div class="btn b-red white fs-14 bold">JUMP TO<img src="../img/vimostsports（About-Us-）_03.jpg" alt=""/></div>
            <ul class="list fs-14 text-capitalize">
                <li>
                    <a href="">about us</a>
                </li>
                <li>
                    <a href="">gallery</a>
                </li>
                <li>
                    <a href="">sublimation</a>
                </li>
                <li>
                    <a href="">how to order</a>
                </li>
                <li>
                    <a href="">order process</a>
                </li>
                <li>
                    <a href="">fabric guide</a>
                </li>
                <li>
                    <a href="">blog</a>
                </li>
                <li>
                    <a href="">FAQS</a>
                </li>
                <li>
                    <a href="">customer reviews</a>
                </li>
                <li>
                    <a href="">contact us</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="content container">
    <p class="con-title">
        <span class="text-uppercase">order details</span>
    </p>
    <div class="process-img">
        <div class="p1 fl pro-active">
            <div class="fl c-icon text-center">
                <div class="icon" style="background-image: url('../img/vimostsports（dingzi-tubiao)_03.png')"></div>
                <p class="fs-18">placed order</p>
                <span class="fs-14">2013-03-12</span>
            </div>
            <div class="fl r-icon"></div>
        </div>
        <div class="p1 fl pro-active">
            <div class="fl l-icon"></div>
            <div class="fl c-icon text-center">
                <div class="icon" style="background-image: url('../img/vimostsports（dingzi-tubiao)_05.png')"></div>
                <p class="fs-18">placed order</p>
                <span class="fs-14">2013-03-12</span>
            </div>
            <div class="fl r-icon"></div>
        </div>
        <div class="p1 fl">
            <div class="fl l-icon"></div>
            <div class="fl c-icon text-center">
                <div class="icon" style="background-image: url('../img/vimostsports（dingzi-tubiao)_07.png')"></div>
                <p class="fs-18">placed order</p>
                <span class="fs-14">2013-03-12</span>
            </div>
            <div class="fl r-icon"></div>
        </div>
        <div class="p1 fl">
            <div class="fl l-icon"></div>
            <div class="fl c-icon text-center">
                <div class="icon" style="background-image: url('../img/vimostsports（dingzi-tubiao)_09.png')"></div>
                <p class="fs-18">placed order</p>
                <span class="fs-14">2013-03-12</span>
            </div>
            <div class="fl r-icon"></div>
        </div>
        <div class="p1 fl">
            <div class="fl l-icon"></div>
            <div class="fl c-icon text-center">
                <div class="icon" style="background-image: url('../img/vimostsports（dingzi-tubiao)_11.png')"></div>
                <p class="fs-18">placed order</p>
                <span class="fs-14">2013-03-12</span>
            </div>
        </div>
    </div>
    <div class="process-list">
        <div class="pro-title fs-18 bold">
            <span class="shipment">Shipment:DHL</span>
            <span class="t-num">Tracking Number:24446547568343665</span>
        </div>
        <ul>
            <li class="active">
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
        </ul>
    </div>
    <div class="process-list">
        <div class="pro-title fs-18 bold">
            <span>ORDER TRACKING INFORMATION</span>
        </div>
        <ul>
            <li class="active">
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
            <li>
                <div></div>
                <p>
                    <b></b>
                    <span class="r1">2015-04-03</span>
                    <span class="r2">sunday</span>
                    <span class="r3">12:24:34</span>
                    <span class="r4">chengdu city transit center has been issued</span>
                </p>
            </li>
        </ul>
    </div>
    <div class="goods-list">
        <div class="fl">
            <p>Order#</p>
            <span>order13</span>
        </div>
        <table class="fl" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th>Product</th>
                <th>Qty</th>
                <th>Price(US$)</th>
                <th>Total(US$)</th>
            </tr>
            <tr>
                <td>hoodies</td>
                <td>3</td>
                <td>$30.00</td>
                <td>$900.00</td>
            </tr>
            <tr>
                <td>hoodies</td>
                <td>3</td>
                <td>$30.00</td>
                <td>$900.00</td>
            </tr>
            <tr>
                <td>hoodies</td>
                <td>3</td>
                <td>$30.00</td>
                <td>$900.00</td>
            </tr>
            <tr>
                <td>hoodies</td>
                <td>3</td>
                <td>$30.00</td>
                <td>$900.00</td>
            </tr>
        </table>
    </div>
    <div class="add-note">
        <p>ADD NOTE</p>
        <textarea rows="5"></textarea>
    </div>
    <div class="total-con">
        <p class="total">Total: $890.00</p>
        <p class="freight">Freight: $0</p>
        <p class="charge">Commission charge: $10.00</p>
        <p class="discount">Discount: #30.00</p>
        <p class="amount">Total Amount: <span class="red">$870.00</span></p>
    </div>
    <div class="swiper">
        <p class="title">
            <span>PRODUCT PICTURES</span>
        </p>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/chanpin-1.jpg" alt=""/>
                </div>
                <div class="swiper-slide">
                    <img src="../img/chanpin-2.jpg" alt=""/>
                </div>
                <div class="swiper-slide">
                    <img src="../img/chanpin-3.jpg" alt=""/>
                </div>
                <div class="swiper-slide">
                    <img src="../img/chanpin-4.jpg" alt=""/>
                </div>
                <div class="swiper-slide">
                    <img src="../img/chanpin-5.jpg" alt=""/>
                </div>
                <div class="swiper-slide">
                    <img src="../img/chanpin-2.jpg" alt=""/>
                </div>
            </div>
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-black"></div>
        <div class="swiper-button-next swiper-button-black"></div>
    </div>
    <div class="bottom-list">
        <div><span>RECEIPT ADDRESS:</span>sichuan/chengdu/xipu town <span>Consignee:</span>ming-yang lee 189****1234</div>
        <div><span>SHIPPING ADDRESS:</span>sichuan/chengdu/xipu town <span>Consignee:</span>ming-yang lee 189****1234</div>
    </div>
</div>
<!--公共底部-->
<div ng-include="'../html/footer.html'"></div>
</body>
<script>
    var mySwiper = new Swiper('.swiper-container',{
        // 如果需要前进后退按钮
        slidesPerView : 5,
        spaceBetween: 15,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        loop: true
    });
</script>
<script src="../js/scroll_top.js"></script>
</html>